<template>
  <div class="Pagination">
    <el-pagination
      :background="background"
      layout="total,prev, pager, next"
      :total="total"
      :current-page="pagination.currentPage"
      :page-size="pagination.pageSize"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>

<script>

export default {
    name: "Pagination",
    props:{
    total: {
        required: true,
        type: Number
    },
    page: {
      type: Number,
      default: 1
    },
    total:{
        type: Number,
        default: 20
    },
    background:{
        type: Boolean,
        default: true
    },
    pagination:{
        type:Object,
    }
        
    },
    data () {
        return {
            newPagination:{
            }
            
        }

    },
    watch:{
        pagination(newV,oldV){
            this.newPagination = newV
             this.$emit('changePage',this.newPagination)
        }


    },
    mounted() {
        this.newPagination=this.pagination
    },
    methods: {
        handleCurrentChange(e){
            console.log(e)
            this.newPagination.currentPage=e
            this.$emit('changePage',this.newPagination)



        }
    }
}
</script>

<style lang="less" scoped>
</style>